import React, { useCallback } from "react";
import { Button, Input, Form } from "react-vant";
import { isPromise } from "react-vant/es/utils";
import { Navigate, useNavigate } from "react-router-dom";
import "./login.scss";
import request from '../utils/request'
import Home from "./manage/Home";
import {useDispatch} from 'react-redux'


function Login() {
  // const [form] = Form.useForm();
  const dispatch = useDispatch()
 const navigate = useNavigate()
const onFinish = useCallback((values) => {
  console.log('Success:', values);
  request.post('/user/login', {
      username: values.username,
      password: values.password,
  }).then(({ data }) => {console.log('data',data)
      if (data.code === 200) {
          // const url = searchParams.get('targetUrl') || '/home'
          console.log(112323123)
          navigate('/manage')
          // 登录成功存储用户信息
          // setUserInfo(data.data)
          dispatch({type:'login',payload:data.data})
      } else if (data.code === 400) {
          console.log('data',data)
          message.error('用户名或密码错误');
      }
  }).catch((err)=>{
      console.log('登陆错误',err);
  })
}, []);
  return (
    <Form
      // nFinish={onFinish}
      // form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: "16px 16px 0" }}>
          <Button round nativeType="submit" type="primary" block>
            登陆
          </Button>
        </div>
      }
    >
      <h1>DLA后台管理</h1>

      <Form.Item
        tooltip={{
          message: "111",
        }}
        rules={[{ required: true, message: "请填写用户名" }]}
        name="username"
        label="用户名"
      >
        <Input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: "请填写密码" }]}
        name="password"
        label="密码"
      >
        <Input placeholder="请输入密码" type="password"/>
      </Form.Item>
    </Form>
  );
}

export default Login;





// import React, { useCallback, useEffect } from 'react'
// import {useNavigate,Link,useSearchParams} from 'react-router-dom'
// import {Form,Button,Checkbox,Input,message} from 'antd'
// import request from '../utils/request';
// import {useDispatch} from 'react-redux'

// function Login() {
//     const navigate = useNavigate()
//     const dispatch = useDispatch()
//     const [searchParams] = useSearchParams()
//     const onFinish = useCallback((values) => {
//         console.log('Success:', values);
//         request.post('/user/login', {
//             username: values.username,
//             password: values.password,
//         }).then(({ data }) => {console.log('data',data)
//             if (data.code === 200) {
//                 // const url = searchParams.get('targetUrl') || '/home'
//                 console.log(112323123)
//                 navigate('/home')
//                 // 登录成功存储用户信息
//                 // setUserInfo(data.data)
//                 dispatch({type:'login',payload:data.data})
//             } else if (data.code === 400) {
//                 console.log('data',data)
//                 message.error('用户名或密码错误');
//             }
//         }).catch((err)=>{
//             console.log('登陆错误',err);
//         })
//     }, []);
//     return (
//         <div>
//             <h1>用户登陆</h1>
//             <Form
//                 name="basic"
//                 labelCol={{
//                     span: 6,
//                 }}
//                 wrapperCol={{
//                     span: 14,
//                 }}
//                 initialValues={{
//                     remember: true,
//                 }}
//                 onFinish={onFinish}
//                 autoComplete="off"
//             >
//                 <Form.Item
//                     label="用户名"
//                     name="username"
//                     rules={[
//                         {
//                             required: true, // 必填
//                             message: '请填写用户名',
//                         },
//                     ]}
//                 >
//                     <Input />
//                 </Form.Item>

//                 <Form.Item
//                     label="密码"
//                     name="password"
//                     rules={[
//                         {
//                             required: true,
//                             message: '请填写密码',
//                         },
//                     ]}
//                 >
//                     <Input.Password />
//                 </Form.Item>

//                 {/* <Form.Item
//                     name="vcode"
//                     label="验证码"
//                     wrapperCol={{
//                         span:6
//                     }}
//                     rules={[
//                         {
//                             required: true,
//                             message: '验证码不能为空',
//                         },
//                     ]}
//                 >
//                     <Input addonAfter={<div className={loginCss.vcode} dangerouslySetInnerHTML={{ __html: vcode}}></div>} />
//                 </Form.Item> */}
//                 <Form.Item
//                     name="remember"
//                     valuePropName="checked"
//                     wrapperCol={{
//                         offset: 6,
//                     }}
//                 >
//                     <Checkbox>免登录</Checkbox>
//                 </Form.Item>

//                 <Form.Item
//                     wrapperCol={{
//                         offset: 6,
//                     }}
//                 >
//                     <Button type="primary" htmlType="submit">
//                         登录
//                     </Button>

//                     没有账号?<Button type="link"><Link to="/login">去注册</Link></Button>
//                 </Form.Item>
//             </Form>
//         </div>

//     )
// }

// export default Login;